<template>
  <w-vertical>
    <section>
      <h2>{{w.name}} <var v-if="w.isW">{{tagName}}</var></h2>
      <p v-html="w.remark"></p>
    </section>
    <w-vertical v-if="w.examples.length">
      <h3>{{w.name}} Examples</h3>
      <Example :w="w"></Example>
    </w-vertical>
    <w-vertical v-if="w.attrs">
      <h3>{{w.name}} {{w.isFunction ? 'Arguments' : 'Attributes'}}</h3>
      <w-table height="*" class="property-table">
        <w-columns>
          <w-column field="name" width="200" />
          <w-column field="remark" width="*" />
          <w-column field="type" width="200" />
          <w-column field="option" width="*" />
          <w-column field="default" width="150" />
        </w-columns>
        <w-thead>
          <w-tr :data="{name: '参数', remark: '说明', type: '类型', option: '可选值', default:'默认值'}">
            <w-td>参数</w-td>
            <w-td>说明</w-td>
            <w-td>类型</w-td>
            <w-td>可选值</w-td>
            <w-td>默认值</w-td>
          </w-tr>
        </w-thead>
        <w-tbody :escape="false" :br="true">
          <w-tr v-for="item in w.attrs" :data="item">
            <w-td v-text="item.name"></w-td>
            <w-td v-html="item.remark"></w-td>
            <w-td v-text="item.type"></w-td>
            <w-td v-html="item.option"></w-td>
            <w-td v-text="item.default"></w-td>
          </w-tr>
          <w-tr v-if="w.hasCommon" style="background: #f8f8f8;">
            <w-td colspan="5">
              <h4>公共参数</h4>
            </w-td>
          </w-tr>
          <w-tr v-if="w.hasCommon" v-for="item in common.attrs" :data="item">
            <w-td v-text="item.name"></w-td>
            <w-td v-html="item.remark"></w-td>
            <w-td v-text="item.type"></w-td>
            <w-td v-html="item.option"></w-td>
            <w-td v-text="item.default"></w-td>
          </w-tr>
        </w-tbody>
      </w-table>
    </w-vertical>
    <w-vertical v-if="w.events.length">
      <h3>{{w.name}} Events</h3>
      <w-table height="*" class="property-table">
        <w-columns>
          <w-column field="name" width="200" />
          <w-column field="remark" width="*" />
          <w-column field="option" width="*" />
        </w-columns>
        <w-thead>
          <w-tr>
            <w-td>事件名称</w-td>
            <w-td>说明</w-td>
            <w-td>参数</w-td>
          </w-tr>
        </w-thead>
        <w-tbody :escape="false" :br="true">
          <w-tr v-for="item in w.events" :data="item">
            <w-td>{{item.name}}</w-td>
            <w-td>{{item.remark}}</w-td>
            <w-td v-html="item.option"></w-td>
          </w-tr>
        </w-tbody>
      </w-table>
    </w-vertical>
    <w-vertical v-if="w.methods.length || w.hasCommon">
      <h3>{{w.name}} Methods</h3>
      <w-table height="*" class="property-table">
        <w-columns>
          <w-column field="name" width="260" />
          <w-column field="remark" width="*" />
          <w-column field="option" width="*" />
          <w-column field="return" width="200" />
        </w-columns>
        <w-thead>
          <w-tr>
            <w-td>方法名称</w-td>
            <w-td>说明</w-td>
            <w-td>参数</w-td>
            <w-td>返回</w-td>
          </w-tr>
        </w-thead>
        <w-tbody :br="true">
          <w-tr v-for="item in w.methods">
            <template v-if="item.examples" #row>
              <w-tr>
                <w-td colspan="4">
                  <div style="padding: 10px">
                    <Example :w="item"></Example>
                  </div>
                </w-td>
              </w-tr>
            </template>
            <template #default>
              <w-td>
                <w-leaf :text="item.name" :children="!!item.examples"/>
              </w-td>
              <w-td v-html="item.remark"></w-td>
              <w-td v-html="item.option"></w-td>
              <w-td v-html="item.return"></w-td>
            </template>
          </w-tr>
          <w-tr v-if="w.hasCommon" style="background: #f8f8f8;">
            <w-td colspan="4">
              <h4>公共方法</h4>
            </w-td>
          </w-tr>
          <w-tr v-if="w.hasCommon" v-for="item in common.methods">
            <template #row>
              <w-tr>
                <w-td colspan="4">
                  <div style="padding: 10px">
                    <Example :w="item"></Example>
                  </div>
                </w-td>
              </w-tr>
            </template>
            <template #default>
              <w-td>
                <w-leaf v-if="item.examples" :text="item.name" :children="true"/>
                <template v-else>{{item.name}}</template>
              </w-td>
              <w-td v-html="item.remark"></w-td>
              <w-td v-html="item.option"></w-td>
              <w-td v-html="item.return"></w-td>
            </template>
          </w-tr>
        </w-tbody>
      </w-table>
    </w-vertical>
    <w-vertical v-if="w.computed.length">
      <h3>{{w.name}} Computed</h3>
      <w-table height="*" class="property-table">
        <w-columns>
          <w-column field="name" width="260" />
          <w-column field="remark" width="*" />
          <w-column field="type" width="*" />
        </w-columns>
        <w-thead>
          <w-tr>
            <w-td>属性名称</w-td>
            <w-td>说明</w-td>
            <w-td>类型</w-td>
          </w-tr>
        </w-thead>
        <w-tbody :escape="false" :br="true">
          <w-tr v-for="item in w.computed" :data="item">
            <w-td>{{item.name}}</w-td>
            <w-td v-html="item.remark"></w-td>
            <w-td v-html="item.type"></w-td>
          </w-tr>
        </w-tbody>
      </w-table>
    </w-vertical>
    <w-vertical v-if="w.slots.length">
      <h3>{{w.name}} Slots</h3>
      <w-table height="*" class="property-table">
        <w-columns>
          <w-column field="name" width="200" />
          <w-column field="remark" width="*" />
          <w-column field="option" width="*" />
          <w-column field="props" width="*" />
        </w-columns>
        <w-thead>
          <w-tr>
            <w-td>插槽名称</w-td>
            <w-td>说明</w-td>
            <w-td>子节点类型</w-td>
            <w-td>变量</w-td>
          </w-tr>
        </w-thead>
        <w-tbody :escape="false" :br="true">
          <w-tr v-for="item in w.slots" :data="item">
            <w-td>{{item.name}}</w-td>
            <w-td>{{item.remark}}</w-td>
            <w-td>{{item.option}}</w-td>
            <w-td v-html="item.props"></w-td>
          </w-tr>
        </w-tbody>
      </w-table>
    </w-vertical>
    <w-vertical v-if="w.css.length">
      <h3>{{w.name}} Css</h3>
      <w-table height="*" class="property-table">
        <w-columns>
          <w-column field="name" width="350" />
          <w-column field="remark" width="*" />
          <w-column field="props" width="200" />
        </w-columns>
        <w-thead>
          <w-tr>
            <w-td>样式名称</w-td>
            <w-td>说明</w-td>
            <w-td>默认值</w-td>
          </w-tr>
        </w-thead>
        <w-tbody :escape="false" :br="true">
          <w-tr v-for="item in w.css" :data="item">
            <w-td>{{item.name}}</w-td>
            <w-td>{{item.remark}}</w-td>
            <w-td>{{item.default}}</w-td>
          </w-tr>
        </w-tbody>
      </w-table>
    </w-vertical>
    <div>&nbsp;</div>
  </w-vertical>
</template>

<script>
  import Example from './Example.vue'
  
  import Common from '../views/widget.common.js'
  
  export default {
    name: 'layout-property',
    components: {
      Example
    },
    props: ['w'],
    data() {
      return {
        common: Common,
      }
    },
    methods: {

    },
    computed: {
      tagName() {
        return '<w-' + (this.w.tagName || this.w.name.toLowerCase()) + '>'
      }
    },

  }
</script>

<style scoped>
  .property-table {
    border: 1px solid #eee;
    border-bottom: 0;
  }
</style>
